Abschlussprojekt - Data Analytics - 3. Dashboard¶

In [1]:
# Importiere benötigte Bibliotheken

# für die Daten

import pandas as pd
import numpy as np

# für die Visualisierung

import plotly.express as px 

# für die Dash-App

from jupyter_dash import JupyterDash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
In [2]:
# Lies vorbereitete Daten aus Pickle-Datei ein

df = pd.read_pickle("kiva_data_after_processing.pkl")
In [3]:
# Selektiere unfinanzierte Projekte aus den USA

df_usa = df.loc[(df.loc[:,"country"] == "United States") & (df.loc[:,"funding_ratio"] == 0),:]

Anzahl unfinanzierter Projekte in den USA je Aktivität für alle Themenbereiche¶

Statische Treemap für alle Projekte mit 0% Finanzierungsrate¶

In [4]:
# Gruppiere nach Sektoren und Aktivitäten und plotte Treemap für Projekte aus USA mit Finanzierungsrate 0

df_group = df_usa.groupby(by = ["sector","activity"], as_index = False).agg({"loan_amount":"count"})

fig = px.treemap(df_group, path = ['sector', 'activity'],
                 values = 'loan_amount',
                 color = 'loan_amount',
                 color_continuous_scale = "OrRd",
                 labels = {"loan_amount": "Anzahl Projekte", "labels": "Activity"},
                 hover_name = "activity",
                 hover_data = {"activity":True, "loan_amount":True}
                 )
 
fig.show()

Anzahl unfinanzierter Projekte in den USA je Aktivität für ausgewählten Themenbereich¶

Treemap im Dashboard für Projekte mit 0% Finanzierungsrate¶

In [5]:
# Wähle Sektoren für Drop Down Menü aus

sectors = df_usa.loc[:,"sector"].unique()
sectors.sort()
In [6]:
# Baue die Dash App

# 1. Erstelle App

usa_crowdproject_app = JupyterDash(__name__)


# 2. Lege Layout fest

usa_crowdproject_app.layout = html.Div(children = [
                            # Überschrift der App
                            html.H1(children = "Unfinanzierte Crowd-Investment Projekte in den USA",
                                    style = {"text-align": "center"}
                                    ),
                            
                            # Untertitel
                            html.Div(children = """
                                     Anzahl der Projekte mit 0% Finanzierungsrate""",
                                     style = {"text-align": "center"}
                                     ),
    
                            # Auswahl der Daten als Dropdown
                            html.Div(style={'position': 'relative', 'top': '9px', "left": "200px"},  # Adjust the position as per your requirement
                                     children=[dcc.Dropdown(id = "dd_sector",                         
                                                 options = sectors,
                                                 placeholder = "Bitte ein Themenbereich auswählen",
                                                 style = {"width": "55%"},
                                                 ),
                                                ]
                                    ),
                            
    
                            # Grafik
                            dcc.Graph(id = "my_figure",
                                      figure = {}                                     
                                      )
                            ])


# 3. Erstelle Callback 

# 3.1 Aufbau des Callbacks: Verbindung mit Elementen aus dem Layout

@usa_crowdproject_app.callback(Output(component_id = "my_figure", component_property = "figure"),
                               Input(component_id = "dd_sector", component_property = "value")
                               )

# 3.2 Erstellen der Update-Funktion: ändert sich der Input, ändert sich der Output

def update_plot(selected_sector):
    
    # Daten selektieren    
    df_select = df_usa.loc[df_usa.loc[:,"sector"] == selected_sector,:]
    
    # Daten gruppieren    
    df_group = df_select.groupby(by = ["activity"], as_index = False).agg({"loan_amount":"count"})
    
    # Plot erstellen    
    my_figure = px.treemap(df_group, path = ["activity"],
                           values = "loan_amount",
                           color = "loan_amount",
                           color_continuous_scale = "OrRd",
                           labels = {"loan_amount": "Anzahl Projekte", "labels": "Activity"},
                           hover_name = "activity",
                           hover_data = {"activity":True, "loan_amount":True }
                           )
    
    # Rückgabewert festlegen    
    return my_figure


# 4. App starten

usa_crowdproject_app.run_server(mode="inline")
Dash is running on http://127.0.0.1:8050/